<template>
    <div class="business">
     <div class="business-content">
       <div class="business-content-top">
         <div  style="text-align:center">
             <p style="padding-top:5rem;font-size:3.25rem;line-height:4.56rem;color:#ECECEC">Duolakuaiyun</p>
             <p style="font-size:2rem;line-height:2.8rem;font-weight:600;position:relative;top:-2.5rem;">这些厂家正在使用“哆啦快运”</p>
         </div>
         </div>

       <div class="business-tips-box" id="business-tips-box">
         <div class="business-tips" style="height:560px;margin-left:9%;margin-top:-0.5%;">
             <Tip v-for="(item,index) in tipdata" :key="index" :item="item.cooperativeCompany" :class="[{small16:small16(index),small17:small17(index),small18:small18(index),small19:small19(index)}]"></Tip>
         </div>
       </div>
     </div>
     <div class="business-bottom"></div>
     </div> 
</template>

<script>
import Tip from './tip';
import axios from 'axios';
export default {
        name: 'business',
         data() {
            return {
                tipdata:[
                  {
                    id: "",
                    cooperativeCompany: ""
                  }
                ],
                businessTip: { 
                    width: '17.875rem',
                    height:'3.94rem',
                    border: '1px solid #F2F2F2',
                    display: 'flex',
                    justifycontent:' center',
                    alignitems:'center',
                    marginright:'1.2rem',
                    fontsize:'1.25rem',
                    lineHeight:'1.75rem'   
                },
                smallsix:'',
                smallseven:'',
                smalleight:'',
                smallnine:''
            }
         },

  mounted(){
    // console.log(this);
    console.log(this.tipdata);
    console.log('加载22')
    this.getData()

  },
		methods:{
            small16:function(index){
                if(index==24){
                    this.smallsix=true;
                    return this.smallsix
                }
            },
            small17:function(index){
                if(index==7||index==10||index==12||index==23){
                    this.smallseven=true;
                    return this.smallseven
                }
            },
            small18:function(index){
              if(index==17||index==18){
                   this.smalleight=true;
                   return this.smalleight
              }
            },
            small19:function(index){
              if(index==19){
                   this.smallnine=true;
                   return this.smallnine
              }
            },
      getData() {
        //=>表示可以渲染模板数据
        axios.get('api/vue/getCooperativeCompany').then((res) => {
          console.log(res); //请求正确时执行的代码
          this.tipdata= res.data;
          console.log(this.tipdata)
        }).catch(function(response) {
          console.log(response); //发生错误时执行的代码
        });
      }
        },
         components: {
            Tip
        },  
	}
</script>

<style scoped>
.business-content {
    width: 100%;
    background-color: #fff;
}

/* top */
.business-content-top {
    width: 100%;
    height: 51.75rem;
    background-image: url("../assets/business/business-top.png");
    background-size: 100% 100%;
}
.business-tips-box {
    width: 100%;
    height: 43.75rem;
    background-image: url("../assets/business/business-bottom.png");
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.business-tips {
    width: 66%;
    display:flex;
    align-items: center;
    flex-wrap:wrap;
}
.business-bottom {
    width: 100%;
    height: 14.6rem;
    background-image: url("../assets/product/product-bottom.png");
    background-size: 100% 100%;
}
.business-tip {  
    width: 22%;
    height:3.25rem;
    box-shadow: 0px 0px 5px rgba(156, 218, 253, 0.514);
    background-color: #fff;
    border-radius:3px;
    display: flex;
    align-items:center;
    margin:0 0.5% 1.5%  0.5%;
    font-size:1.12rem;
    line-height:1.56rem;   
}
.small16 {
    font-size:0.875rem;
    line-height: 1.25rem;
}
.small17 {
    font-size: 0.9375rem;
    line-height: 1.13rem;
}
.small18 {
    font-size: 1rem;
    line-height: 1.56rem;
} 
.small19 {
    font-size: 1.06rem;
    line-height: 1.625rem;
} 

</style>
